<template>
	<view class="container">
		<view class="header">
			<Gap height="30rpx" />
			<view class="flex w-full">
				<text class="text-white font-bold text-xl ml-5">大神榜</text>
			</view>
			<view class="flex justify-between items-end w-90">
				<view class="rank-2 relative flex flex-col items-center">
					<image class="avatar" :src="listDataTo3[1].avatar" mode="scaleToFill" />
					<text class="nickname ">{{ listDataTo3[1].nickname }}</text>
					<view class="times">
						<text class="">抓中{{ listDataTo3[1].grab_count }}次</text>
					</view>
				</view>
				<view class="rank-1 relative flex flex-col items-center">
					<image class="avatar" :src="listDataTo3[0].avatar" mode="scaleToFill" />
					<text class=" nickname">{{
						listDataTo3[0].nickname }}</text>
					<view class="times ">
						<text class="">抓中
							{{ listDataTo3[0].grab_count }}次
						</text>
					</view>
				</view>
				<view class="rank-3 relative flex flex-col items-center">
					<image class="avatar" :src="listDataTo3[2].avatar" mode="scaleToFill" />
					<text class="nickname ">{{ listDataTo3[2].nickname }}</text>
					<view class="times ">
						<text class="">抓中{{ listDataTo3[2].grab_count }}次</text>
					</view>
				</view>
			</view>
		</view>
		<Gap height="30rpx" />
		<view class="w-full flex justify-center">
			<view class="w-94 bg-white flex flex-col items-center rounded-3xl">
				<view class="flex items-center w-96 mt-4 " v-for="(item, index) in listDataToEnd" :key="index">
					<text class="font-bold text-base w-1/12">{{ index + 4 }}</text>
					<image :src="item.avatar" mode="scaleToFill" class=" rounded-full w-10 h-10 ml-2" />
					<text class="ml-2 font-bold text-sm w-5/12 truncate">{{ item.nickname }}</text>
					<text class="ml-2 font-bold text-sm text-right w-4/12">抓中{{ item.grab_count }}次</text>
				</view>
				<Gap height="30rpx" />
			</view>
		</view>
	</view>
	<Footer></Footer>
</template>

<script setup lang="ts">
import { uiwu, userRanking } from '@/api/interface/interface';
import Gap from '@/components/gap.vue';
import Footer from "@/components/footer.vue";
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
const listData = ref<Array<object>>([])
const pageNum = ref<number>(1)
const more = ref<string>('loading');
const isLock = ref<boolean>(true)
const getuserRanking = async (mack: boolean = false): Promise<any> => {
	if (!mack) pageNum.value = 1
	const { data: { data, total } } = await userRanking({
		page: pageNum.value
	});
	isLock.value = true
	uiwu.setlist({
		isMore: mack,
		listData,
		total,
		listRow: data,
		more,
		pageNum
	})
}

/**
 * 前三名
 */
const listDataTo3 = computed(() => {
	return listData.value.slice(0, 3);
});

const listDataToEnd = computed(() => {

	return listData.value.slice(3, listData.value.length);
});

/**
 * 加载更多
 */
const scrolltolower = () => {
	if (!isLock.value) return
	isLock.value = false
	pageNum.value++
	userRanking(true)
}
onLoad(() => {
	getuserRanking()
})
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;

	.header {
		height: 246px;
		background: linear-gradient(270deg, rgba(237, 121, 126, 1)0%, rgba(230, 0, 18, 1)100%);
		@apply flex flex-col items-center w-full rounded-br-3xl rounded-bl-3xl;

		.rank-1 {
			width: 108px;
			height: 185px;
			background: url(@/static/image/ranking-1.png) no-repeat;
			background-size: 100% 100%;

			.avatar {
				width: 75px;
				height: 75px;
				top: 16px;
			}

			.times {
				bottom: 20px;
			}

			.nickname {
				top: 115px;
			}
		}

		.rank-2 {
			background: url(@/static/image/ranking-2.png) no-repeat;
		}

		.rank-3 {
			background: url(@/static/image/ranking-3.png) no-repeat;
		}

		.rank-2,
		.rank-3 {
			width: 91px;
			height: 156px;
			background-size: 100% 100%;

			.avatar {
				width: 63px;
				height: 63px;
				top: 13px;
			}

			.times {
				bottom: 15px;
			}

			.nickname {
				top: 100px;
			}
		}

		.rank-1,
		.rank-2,
		.rank-3 {
			.avatar {
				@apply rounded-full absolute
			}

			.times {
				text {
					@apply text-xs w-full text-center
				}

				@apply flex w-96 justify-between items-center absolute
			}

			.nickname {
				@apply font-bold truncate w-90 absolute text-center
			}
		}
	}
}
</style>
